<template>
  <div id="headertop">
    <nav class="top">
      <div class="topN">
        <div class="logo">
          <img :src="img" alt="" /><span>优租云</span>
        </div>
        <ul class="nav">
          <a target="_top" href="/">
            <li class="bottom_color">首页</li>
          </a>
          <router-link target="_top" to="/">
            <li>产品中心</li>
          </router-link>
          <a target="_top" href="/article">
            <li>资讯</li>
          </a>
          <a target="_top" href="/about">
            <li>关于我们</li>
          </a>
          <a target="_top" href="/login" v-if="info == ''">
            <li>登录</li>
          </a>
          <template v-else>
            <router-link :to="{name: 'task'}">
              <li><img :src="headPortrait" alt="" /><span class="name">{{headName}}</span></li>
            </router-link>
            <li @click="loginOut()">退出</li>
          </template>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
  name: 'headertop',
  data () {
    return {
      img: require('../assets/images/logo.png'),
      task: [],
      recom: [],
      news: [],
      nest: '',
      info: ''
    };
  },
  mounted () {
    this.showData();
    this.$bus.$on('upDate', () => {
      this.showData();
    });
  },
  methods: {
    ...mapMutations(['changeHeadPortrait']),
    showData () {
      this.axios.get('user/info')
        .then(({ data }) => {
          if (data.code === 200) {
            this.info = data.data;
            this.changeHeadPortrait(data.data);
          } else if (data.code === 101) {
            this.$message(data.msg);
            location.href = '/login.html';
          } else if (data.code === 400) {
            this.$message(data.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loginOut: function () {
      location.replace('/logout');
    }
  },
   computed:{
    ...mapState(["headPortrait","headName"]),
  }
};
</script>

<style lang="scss" scoped>
  @media (max-width:1470px) {
    .top .topN{
        width: 1000px!important;
    }
    .foot p{
        width: 950px!important;
        margin: 0 auto;
    }
    .perCenter{
        width: 950px!important;
    }
    .aboutNest .nestAbout{
        width: 950px!important;
    }
    .contactTit{
        width: 950px!important;
    }
}
.top{
    background-color: rgba(4,11,20,0.8);
    color: #fff;
    font-family: "Microsoft YaHei";
}
.top .topN{
    width: 63%;
    margin: 0 auto;
    position: relative;
    /*padding: 10px;*/
    height: 80px;
    line-height: 80px;
}
.top .topN .logo{
    display: inline-block;
    width: 25%;
    vertical-align: top;
}
.top .topN .logo img{
    width: 40px;
    vertical-align: middle;
    position: relative;
    top:-5px;
}
.top .topN .logo span{
    font-size: 18px;
    margin-left: 10px;
}
.top .topN ul{
    display: inline-block;
    width: 74%;
    top:20px;
    font-size: 14px;
    text-align: right;
}
.top .topN ul li{
    display: inline-block;
    text-align: center;
    padding: 0 30px;
    cursor: pointer;
    color: #fff;
}
.top .topN ul li img{
    width: 35px;
    height: 35px;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 100%;
}
.top .topN ul li .name{
    display: inline-block;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}
.top .topN ul li:hover{
    color: #10a57d;
}
</style>
